<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>稻普资金子系统-登录</title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="../../build/css/common.css" media="all">
</head>
<body >
    <div class="layui-padding">
        <!--查询-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="orgName" autocomplete="off"  class="layui-input" placeholder="业务部门">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="cusName" autocomplete="off" class="layui-input" placeholder="客户姓名">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="cusNo" autocomplete="off" class="layui-input" placeholder="客户身份证">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="bank" autocomplete="off" class="layui-input" placeholder="按揭银行">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="startTime" id="startTime"  placeholder="起始日期-结束日期" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn">执行查询</button>
                </div>
            </div>
        </div>

        <!--订单内容-->
        <div class="cly-listCon">
            <table class="layui-hide" id="test" width="100%" lay-filter="demo"></table>
        </div>
    </div>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="download">下载贷款资料</a>
    </script>

    <script src="../../plugins/layui/layui.js"></script>
    <script type="text/javascript">

        layui.use(['laypage', 'laydate','layer','jquery','form','table'], function(laypage,laydate,layer,$,form,table){
            //日期范围
            laydate.render({
                elem: '#startTime',
                range: true
            });

            var width = $(".cly-listCon").width()/10 - 5;
            table.render({
                elem: '#test',
                url:'../../datas/navbar1.json',
                cellMinWidth: 80,
                height: 'full-130',
                cols: [[
                    {field:'id', title: 'ID', width:width},
                    {field:'username', title: '用户名', width:width}, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    {field:'sex', title: '性别', width:width},
                    {field:'city', title: '城市', width:width},
                    {field:'sign', title: '签名', width:width},
                    {field:'classify', title: '职业', align: 'center', width:width}, //单元格内容水平居中
                    {field:'experience', title: '积分', align: 'right', width:width}, //单元格内容水平居中
                    {field:'score', title: '评分', align: 'right', width:width},
                    {field:'wealth', title: '财富', align: 'right', width:width},
                    {field:'oprate', width:width, title: '操作', fixed: 'right', toolbar: '#barDemo', align: 'center'}
                ]],
                page: true
            });

            //监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'download'){
                    layer.confirm('确定要下载资料吗？', {
                        btn: ['确定', '取消'],
                    }, function(index, layero){
                        layer.msg('ID：'+ data.id + ' 的下载操作');
                    })
                }
            });
        });
    </script>
</body>
</html>
